<template>
  <div id="wentigzList" :style="{ width: '100%', height: '100%', backgroundColor: '#fff' }"></div>
</template>
<script>
import echarts from 'echarts'
let echartData = {}
export default {
  data() {
    return {}
  },
  props: ['chartsData'],
  watch: {
    chartsData: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      },
    },
  },
  mounted() {
    echartData = this.chartsData
    var color = ['rgba(66,157,251', 'rgba(79,203,116', 'rgba(11,191,91', 'rgba(254,207,51']
    const caonimaColor = ['#1989FA', '#4ECB73']
    var lineY = []
    for (var i = 0; i < echartData.names.length; i++) {
      var x = i
      if (x > color.length - 1) {
        x = color.length - 1
      }
      var data = {
        name: echartData.names[i],
        type: 'line',
        // color: color[x] + ')',
        color: caonimaColor[x],
        smooth: true,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: color[x] + ', 0.3)',
                },
                {
                  offset: 0.8,
                  color: color[x] + ', 0)',
                },
              ],
              false
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        symbol: 'circle',
        symbolSize: 5,
        data: echartData.value[i],
      }
      lineY.push(data)
    }
    const option4 = {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: echartData.names,
        textStyle: {
          fontSize: 12,
          color: '#151619',
        },
        right: '35%',
      },
      grid: {
        top: '10%',
        left: 20,
        right: 15,
        bottom: '2%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: echartData.lineX,
        axisLabel: {
          textStyle: {
            color: '#333',
          },
        },
      },
      yAxis: {
        name: echartData.unit,
        type: 'value',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#333',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#F7F8F8',
          },
        },
        axisLine: {
          lineStyle: {
            color: '#F7F8F8',
          },
        },
      },
      series: lineY,
    }
    var myChart = echarts.init(document.getElementById('wentigzList'))
    myChart.setOption(option4)
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
}
</script>
